import { memo, useEffect, useState } from "react";
import Top from "../../components/top/Top";
import { InfiniteScroll } from "antd-mobile";
import { goodsList } from "../../Api";
import styles from "./bookList.module.scss";
import { useNavigate } from "react-router-dom";
interface DataList {
  [props: string]: any;
}
let BookList: React.FC = () => {
  let to = useNavigate();
  let [list, setList] = useState({
    perpage: 10,
    goods_type: "1",
    goods_position: "0",
  });
  let [dataList, setDateList] = useState<DataList[]>([]);
  let [hasMore, setHasMore] = useState(true);
  let data = async () => {
    let { data } = await goodsList(list);
    setDateList((val) => [...val, ...data.data.list]);
    if (list.goods_type === "1") {
      setList({
        ...list,
        goods_position: String(Number(list.goods_position) + 3),
        goods_type: "4",
      });
    } else {
      setList({
        ...list,
        goods_position: String(Number(list.goods_position) + 10),
        goods_type: "4",
      });
    }

    setHasMore(dataList.length < data.data.total);
  };

  return (
    <>
      <Top title="找书单" />
      <ul className={styles.box}>
        {dataList.map((item) => (
          <li key={item.goods_id} onClick={() => to("/bookpagedetails/" + item.goods_id)}>
            <img src={item.goods_thumb} alt="" />
            <h3>{item.goods_name}</h3>
            <p>{item.expert_description}</p>
            <div className={styles.user}>
              <img src={item.expert.avatar} alt="" />
              <span>{item.expert.name}</span>
            </div>
          </li>
        ))}
        <InfiniteScroll loadMore={data} hasMore={hasMore} />
      </ul>
    </>
  );
};
export default memo(BookList);
